<!--  -->
<template>
  <div class="music_play">
    <!-- 播放器 -->
    <div class="left_wrap">
      <div v-if="musicUrl" class="left">
        <div class="playDetail">
          <div @click="dialogVisible = !dialogVisible" class="cover">
            <!-- <img :src="musicDetail.al.picUrl" alt="" /> -->
            <el-image
              :src="musicDetail.al.picUrl"
              fit="cover"></el-image>
          </div>
          <el-dialog
            :visible.sync="dialogVisible"
            width="100%"
            :before-close="handleClose"
            :modal="false"
            :close-on-click-modal="false"
            :append-to-body="true"
            :fullscreen="true"
          >
            <div :style="{ backgroundColor: bg_color }" class="detail_content">
              <div class="cover">
                <img class="music_img" :src="musicDetail.al.picUrl" alt="" />
                <div class="music_info">
                  <div class="cover_name">歌曲-{{ musicDetail.name }}</div>
                  <div class="creator_name">
                    歌手-{{ musicDetail.ar[0].name }}
                  </div>
                  <div class="album_name">专辑-{{ musicDetail.al.name }}</div>
                  <div class="color_change">
                    <div
                      @click="colorChange(item)"
                      v-for="(item, index) in colorList"
                      :key="index"
                      :style="{ backgroundColor: item }"
                      class="color_item"
                    ></div>
                  </div>
                </div>
              </div>

              <div class="lyric">
                <LyricsScroll :lyric="lyric"></LyricsScroll>
              </div>

              <div class="comment">
                <div v-if="musicComment.length > 0" class="comment-wrap">
                  <ul v-show="hotComments.length > 0">
                    <p>热门评论:</p>
                    <li v-for="(item, index) in hotComments" :key="index">
                      <div
                        @click="toUser(item.user.userId)"
                        class="comment_cover"
                      >
                        <el-image
                          :src="item.user.avatarUrl"
                          fit="cover"
                        ></el-image>
                      </div>
                      <div class="comment_content">
                        <div class="comment_user_name">
                          {{ item.user.nickname }}
                        </div>
                        <div class="comment_info">{{ item.content }}</div>
                        <div class="comment_footer">
                          <div class="comment_time">
                            {{ item.time | dateFormat }}
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>

                  <ul>
                    <p>全部评论:</p>
                    <li v-for="(item, index) in musicComment" :key="index">
                      <div
                        @click="toUser(item.user.userId)"
                        class="comment_cover"
                      >
                        <el-image
                          :src="item.user.avatarUrl"
                          fit="cover"
                        ></el-image>
                      </div>
                      <div class="comment_content">
                        <div class="comment_user_name">
                          {{ item.user.nickname }}
                        </div>
                        <div class="comment_info">{{ item.content }}</div>
                        <div class="comment_footer">
                          <div class="comment_time">
                            {{ item.time | dateFormat }}
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
                <div v-else>
                  <el-empty description="暂无评论"></el-empty>
                </div>
              </div>
            </div>
          </el-dialog>
        </div>
        <div class="title">
          <div>{{ musicDetail.name }}</div>
          <p>{{ musicDetail.ar[0].name }}</p>
        </div>
      </div>
    </div>

    <div class="control">
      <div class="btn">
        <div @click="changeOrder" class="order">
          <i v-show="playOrder === 0" class="iconfont iconliebiao"></i>
          <i v-show="playOrder === 1" class="iconfont iconxunhuan"></i>
          <i v-show="playOrder === 2" class="iconfont icondanquxunhuan"></i>
          <i v-show="playOrder === 3" class="iconfont iconsuijibofang"></i>
        </div>

        <i @click="preSong" class="iconfont iconshangyishou"></i>
        <i
          v-if="isPlaying"
          @click="pauseSong"
          class="iconfont iconzanting stop"
        ></i>
        <i v-else @click="playSong" class="iconfont iconbofang1 stop"></i>
        <i @click="nextSong" class="iconfont iconxiayishou"></i>
        <i
          @click="dialogVisible = !dialogVisible"
          class="iconfont icongeci"
        ></i>
      </div>

      <div class="progress_wrap">
        <audio
          @timeupdate="durationUpdate"
          @ended="nextSong"
          id="audio"
          autoplay
          ref="audio"
          :src="musicUrl"
        ></audio>
        <span>{{ currentTime }}</span>
        <div class="slide_time">
          <el-slider
            :show-tooltip="false"
            @mousedown.native="isChange = true"
            @mouseup.native="isChange = false"
            :max="maxTime"
            @change="handleTime"
            v-model="sliderTime"
          ></el-slider>
        </div>
        <span>{{ durationTime }}</span>
      </div>
    </div>

    <div class="volume">
      <div class="control_volume">
        <div
          @click="handleSound(true)"
          v-if="!noSound"
          class="iconfont iconyinliang"
        ></div>
        <div
          @click="handleSound(false)"
          v-else
          class="iconfont icon24gl-volumeCross"
        ></div>
        <el-slider
          class="slider"
          v-model="nowVolume"
          :max="100"
          :step="1"
          @change="changeVolume"
        ></el-slider>
      </div>
      <div class="like_container">
        <div
          @click="handleLike(true)"
          v-if="!isLike"
          class="like iconfont iconshoucang2"
        ></div>
        <div
          @click="handleLike(false)"
          v-else
          class="like iconfont iconshoucangfuben"
        ></div>
      </div>
    </div>
    <div class="popover">
      <el-popover
        placement="top-start"
        title="最近播放"
        width="400"
        trigger="click"
        :visible-arrow="false"
        style="height: 900px"
      >
        <div class="content">
          <el-table
            type="index"
            :data="songs ? songs : []"
            highlight-current-row
            size="mini"
            stripe
            style="width: 100%"
            @row-dblclick="startSong"
          >
            <el-table-column label="音乐标题" width="150">
              <template slot-scope="scope">
                <div
                  class="music_name_wrap"
                  :class="{ active_position: scope.row.id === songId }"
                >
                  <i
                    style="font-size: 20px"
                    @click="startSong(scope.row)"
                    class="el-icon-video-play"
                  ></i>
                  <span class="music_name" style="margin-left: 10px">{{
                    scope.row.name
                  }}</span>
                  <i
                    @click="toDetail(scope.row.mv)"
                    v-if="scope.row.mv != 0"
                    class="el-icon-video-camera"
                  ></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              prop="ar[0].name"
              label="歌手"
              width="150"
            >
            </el-table-column>
            <el-table-column align="center" label="时长">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  Math.floor(scope.row.dt / 1000) | timeFormat
                }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div slot="reference" class="iconfont icongedan"></div>
      </el-popover>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import moment from "moment";
import { getMusicUrl } from "util/findMusic";
import LyricsScroll from "components/lyricsScroll/LyricsScroll.vue";
import {
  getLikeMusic,
  getLikeMusicList,
  getMusicDetailList,
  getPlayListDetail,
  getLyric,
  getMusicComment,
} from "util/songListPage";
import { getCommentLike } from "util/songListPage";

export default {
  name: "",
  components: {
    LyricsScroll,
  },
  data() {
    return {
      // 歌曲当前时长
      musicDuration: 0,
      musicDetail: {},
      currentTime: "00:00",
      // durationTime: '00:00',
      currentWidth: 0,
      trackIds: [],
      songs: localStorage.getItem("songs")
        ? JSON.parse(localStorage.getItem("songs"))
        : [],
      queryIds: "",
      index: 0,
      //音量值
      // volumeVal: 50,
      //当前音量
      nowVolume: 50,
      playOrder: 0,
      //歌词
      lyric: [[0, "正在加载歌词"]],
      dialogVisible: false,
      //歌曲评论
      musicComment: [],
      //
      hotComments: [],
      noSound: false,
      likeList: [],
      isLike: false,
      //滑块当前进度
      sliderTime: 0,
      //判断是否被拖动
      isChange: false,
      colorList: [
        "#574266",
        "#888084",
        "#2F2524",
        "#424c50",
        "#3A424B",
        "#3E4F34",
      ],
      bg_color: "#3A424B",
    };
  },
  computed: {
    ...mapGetters("musicPlay", [
      //当前播放歌曲url
      "musicUrl",
      //当前播放歌单id
      "songListId",
      //当前播放歌曲id
      "songId",
      //判断当前是否在播放
      "isPlaying",
      //判断播放顺序模式
      "playOrd",
      //当前播放列表
      "playList",
      //已经播放过的列表
      "hasPlayList",
      //可播放范围
      "slider",
      //播放范围
      "playDur",
      //歌曲时长
      "durationTime",
      //当前播放音量
      "volumeVal",
      //歌曲时长秒数
      "maxTime",
      // 'currentTime'
      //歌曲细节
      // 'musicDeatil'
    ]),
    ...mapGetters("userInfo", ["userId", "loginStatus"]),
  },
  watch: {
    songListId(newVal) {
      this.getPlayListDetail(newVal);
    },
    songId(newValue, oldValue) {
      // console.log(newValue)
      // console.log(oldValue);
      this.getMusicUrl(newValue);
      if (this.songListId) {
        this.getPlayListDetail();
      }
      this.getLyric(newValue);
      this.getMusicComment(newValue, 100);
    },
    // 监听歌曲变化
    musicUrl(newUrl, oldUrl) {
      if (newUrl === oldUrl) return;
      this.$store.dispatch("musicPlay/saveIsPlaying", true);
      sessionStorage.setItem("isPlaying", true);
      // this.showList();
    },
    isPlaying(newValue, oldValue) {
      // console.log(newValue);
      if (newValue === false) {
        this.pauseSong();
      }
    },
    nowVolume(newVal) {
      if (newVal == 0) {
        this.noSound = true;
      } else {
        this.noSound = false;
      }
    },
    isLike(newVal) {
      // console.log(newVal);
      this.getLikeList();
    },
  },
  created() {
    if (this.loginStatus == "true") {
      this.getLikeList();
    }
    // console.log(this.hasPlayList);
    // this.showList();
    this.musicDetail = JSON.parse(sessionStorage.getItem("musicDetail"));
  },
  methods: {
    //获取歌曲播放链接
    async getMusicUrl(id) {
      let {
        data: { data },
      } = await getMusicUrl(id);
      // console.log(data)
      if (data[0].url === null) {
        this.$message({
          type: "warning",
          message: `歌曲暂未获得版权`,
        });
        this.nextSong();
      }
      this.isLike = this.likeList.some((item) => {
        return item == id;
      });
      let res = await getMusicDetailList(id);
      this.musicDetail = res.data.songs[0];
      if (this.songs.map((v) => v.id).indexOf(res.data.songs[0].id) == -1) {
        this.songs.push(res.data.songs[0]);
        localStorage.setItem("songs", JSON.stringify(this.songs));
      }
      this.$store.dispatch("musicPlay/saveMusicDetail", this.musicDetail);
      sessionStorage.setItem("musicDetail", JSON.stringify(this.musicDetail));
      // console.log(res.data.songs[0].dt);
      let durTime = moment(res.data.songs[0].dt).format("mm:ss");
      let maxTime = parseInt(moment(res.data.songs[0].dt).format("X"));

      this.$store.dispatch("musicPlay/savemaxTime", maxTime);
      sessionStorage.setItem("maxTime", maxTime);

      this.$store.dispatch("musicPlay/saveDurationTime", durTime);
      sessionStorage.setItem("durationTime", durTime);
      // console.log(this.durationTime);
      this.$store.dispatch("musicPlay/saveMusicUrl", data[0].url);
      sessionStorage.setItem("musicUrl", data[0].url);

      // console.log(this.hasPlayList);
      // console.log(typeof this.hasPlayList);
    },
    //获取喜欢音乐列表
    async getLikeList() {
      let { data } = await getLikeMusicList(this.userId);
      // console.log(data)
      this.likeList = data.ids;
    },
    //喜欢音乐
    async handleLike(type) {
      let { data } = await getLikeMusic(this.songId, type);
      // console.log(data);
      if (data.code == 200 && type == true) {
        this.$message.success("已添加到我喜欢的音乐");
        this.isLike = true;
      } else {
        this.$message("取消喜欢成功");
        this.isLike = false;
      }
    },
    //获取歌单信息
    async getPlayListDetail() {
      if (this.songListId) {
        let { data } = await getPlayListDetail(this.songListId);
        this.trackIds = data.playlist.trackIds;
      }
      // console.log(this.trackIds);
      // this.showList();
    },
    //展示歌单
    async showList() {
      this.hasPlayList.forEach((item) => {
        this.queryIds += item + ",";
      });
      // console.log(this.queryIds)
      let { data } = await getMusicDetailList(
        this.queryIds.substr(0, this.queryIds.length - 1)
      );
      // console.log(data)
      // console.log(this.songs);
      if (data.songs) {
        this.songs = this.songs.concat(data.songs);
      }
      localStorage.setItem(
        "songs",
        JSON.stringify(data.songs) ? JSON.stringify(data.songs) : []
      );
    },
    //监听歌曲进度
    durationUpdate(res) {
      // console.log(res);
      if (this.isChange === true) return;
      this.sliderTime = this.$refs.audio.currentTime;
      this.currentTime = moment(this.$refs.audio.currentTime * 1000).format(
        "mm:ss"
      );
      let time = this.$refs.audio.currentTime;
      this.$store.commit("musicPlay/saveCurrentTime", time);
    },
    //拖动进度条
    handleTime() {
      if (this.maxTime === 0) return;
      this.$refs.audio.currentTime = this.sliderTime;
      this.isChange = false;
    },
    // 播放音乐
    playSong() {
      this.$store.dispatch("musicPlay/saveIsPlaying", true);
      sessionStorage.setItem("isPlaying", true);
      this.$refs.audio.play();
    },
    // 暂停音乐
    pauseSong() {
      this.$store.dispatch("musicPlay/saveIsPlaying", false);
      sessionStorage.setItem("isPlaying", false);

      this.$refs.audio.pause();
    },
    //上一首
    preSong() {
      if (!this.songListId) {
        this.hasPlayList.forEach((v, i) => {
          if (v === this.songId && i === 0) {
            this.index = this.hasPlayList.length - 1;
          } else if (v === this.songId && i !== 0) {
            this.index = i - 1;
          }
        });
        this.$store.dispatch(
          "musicPlay/saveSongId",
          this.hasPlayList[this.index]
        );
      } else {
        this.trackIds.forEach((v, i) => {
          if (v.id === this.songId && i === 0) {
            this.index = this.trackIds.length - 1;
          } else if (v.id === this.songId && i !== 0) {
            this.index = i - 1;
          }
        });

        this.$store.dispatch(
          "musicPlay/saveSongId",
          this.trackIds[this.index].id
        );
      }
    },
    //下一首
    nextSong() {
      switch (this.playOrder) {
        case 0:
          this.ordPlay();
          break;
        case 1:
          this.cirPlay();
          break;
        case 2:
          this.rePlaySong();
          break;
        case 3:
          this.randomPlay();
          break;
      }
    },
    //顺序播放
    ordPlay() {
      if (!this.songListId) {
        this.hasPlayList.forEach((v, i) => {
          if (v === this.songId && i === this.hasPlayList.length - 1) {
            this.index = 0;
          } else if (v === this.songId && i !== this.hasPlayList.length - 1) {
            this.index = i + 1;
          }
        });
        this.$store.dispatch(
          "musicPlay/saveSongId",
          this.hasPlayList[this.index]
        );
      } else {
        this.trackIds.forEach((v, i) => {
          if (v.id === this.songId && i === this.trackIds.length - 1) {
            this.index = 0;
          } else if (v.id === this.songId && i !== this.trackIds.length - 1) {
            this.index = i + 1;
          }
        });
        this.$store.dispatch(
          "musicPlay/saveSongId",
          this.trackIds[this.index].id
        );
      }
    },
    //列表循环
    cirPlay() {
      this.trackIds.forEach((v, i) => {
        if (v.id === this.songId && i === this.trackIds.length - 1) {
          this.index = 0;
        } else if (v.id === this.songId && i !== this.trackIds.length - 1) {
          this.index = i + 1;
        }
      });
      this.$store.dispatch(
        "musicPlay/saveSongId",
        this.trackIds[this.index].id
      );
    },
    //单曲循环
    rePlaySong() {
      this.$store.dispatch("saveIsPlaying", true);
      sessionStorage.setItem("isPlaying", true);

      this.$refs.audio.load();
    },
    //随机播放
    randomPlay() {
      let randomNum = Math.round(Math.random() * this.trackIds.length);
      this.$store.dispatch("musicPlay/saveSongId", this.trackIds[randomNum].id);
    },
    //音量改变时
    changeVolume() {
      this.$refs.audio.volume = this.nowVolume / 100;
    },
    //改变播放模式
    changeOrder() {
      if (this.playOrder === 3) {
        this.playOrder = 0;
      }
      this.playOrder = this.playOrder + 1;
    },
    //mv
    toDetail(id) {
      this.pauseSong();
      this.$router.push("/mvDetail/" + id);
    },
    //歌曲列表播放
    startSong(musicDetail, index) {
      // console.log(this.songListId);

      this.$store.dispatch("musicPlay/saveIsPlaying", true);
      sessionStorage.setItem("isPlaying", true);

      //保存当前歌单id
      this.$store.commit("musicPlay/saveSongListId", this.songListId);

      //保存当前歌曲id
      this.$store.dispatch("musicPlay/saveSongId", musicDetail.id);
    },
    //获取歌词
    async getLyric(id) {
      let { data } = await getLyric(id);
      // console.log(data);
      if (!data.lrc) {
        // console.log("--");
        this.lyric = [[0, "暂无歌词"]];
        return;
      }
      let lyrics = data.lrc.lyric;
      // 对获取到的歌词进行处理
      let arr = lyrics.split("\n");
      let array = [];
      // let obj = {};
      let time = "";
      let value = "";
      let result = [];

      //去除空行
      arr.forEach((item) => {
        if (item != "") {
          array.push(item);
        }
      });
      arr = array;
      arr.forEach((item) => {
        time = item.split("]")[0];
        value = item.split("]")[1];
        //去掉时间里的中括号得到xx:xx.xx
        var t = time.slice(1).split(":");
        //将结果压入最终数组
        result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);
      });

      this.lyric = result;
      // console.log(this.lyric);
    },
    //关闭详情播放器
    handleClose(done) {
      done();
    },
    //获取歌曲评论
    async getMusicComment(id, limit) {
      let { data } = await getMusicComment(id, limit);
      // console.log(data);
      this.musicComment = data.comments;
      this.hotComments = data.hotComments;
    },
    //静音
    handleSound(type) {
      this.noSound = type;
      if (type == true) {
        this.nowVolume = 0;
      } else {
        this.nowVolume = 50;
      }
      this.$refs.audio.volume = this.nowVolume / 100;
    },
    //全部评论点赞
    async getCommentLike(cid, type, index) {
      let { data } = await getCommentLike(this.songId, cid, type, 0);
      if (data.code == "200" && type === 1) {
        this.musicComment[index].liked = true;
        this.musicComment[index].likedCount += 1;
      } else {
        this.musicComment[index].liked = false;
        this.musicComment[index].likedCount -= 1;
      }
    },
    //热门评论点赞
    async getHotCommentLike(cid, type, index) {
      let { data } = await getCommentLike(this.songId, cid, type, 0);
      if (data.code == "200" && type === 1) {
        this.hotComments[index].liked = true;
        this.hotComments[index].likedCount += 1;
      } else {
        this.hotComments[index].liked = false;
        this.hotComments[index].likedCount -= 1;
      }
    },
    toUser(id) {
      this.$router.push("/userInfo/" + id);
      this.dialogVisible = false;
    },
    //换肤
    colorChange(color) {
      this.bg_color = color;
    },
  },
};
</script>

<style scoped lang='less'>
.music_play {
  display: flex;
}
.left_wrap {
  width: 33vw;
}
.left {
  //   background: #000;
  display: flex;
  width: 500px;
  padding-top: 10px;
}
.left .cover {
  width: 50px;
  height: 50px;
  margin-top: 5px;
}
.left .cover .el-image {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.left .title {
  color: #333;
  font-size: 15px;
  font-weight: 600;
  line-height: 30px;
  margin-left: 20px;
}
.left .title p {
  font-size: 14px;
}
.control {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 31vw;
  .btn {
    width: 56%;
    padding: 0 70px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    i {
      font-size: 22px;
    }
    i:hover {
      color: red;
    }
    .stop {
      font-size: 32px;
    }
  }
  .progress_wrap {
    width: 100%;
    height: 25px;
    display: flex;
    line-height: 25px;
    padding-bottom: 5px;
    span {
      font-size: 10px;
    }
    .slide_time {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      /deep/.el-slider {
        width: 90%;
        .el-slider__bar {
          height: 5px;
          background-color: #000000;
        }
        .el-tooltip {
          margin-bottom: 1px;
          height: 5px;
          width: 5px;
          border: #000000 3px solid;
          background-color: #000000;
          border-radius: 50%;
        }
      }
    }
  }
}
.volume {
  width: 27vw;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 30px;
  .control_volume {
    display: flex;
    line-height: 80px;
    align-items: center;
    .iconyinliang {
      font-size: 22px;
      margin-right: 14px;
    }
    .icon24gl-volumeCross {
      font-size: 22px;
      margin-right: 14px;
    }
    /deep/ .slider {
      width: 200px;
      background-color: #fff;
      .el-slider__bar {
        background-color: #000000;
      }
      .el-tooltip {
        height: 6px;
        width: 6px;
        border: #000000 3px solid;
        background-color: #000000;
      }
    }
  }
  .like_container {
    margin-left: 20px;
    .like {
      font-size: 25px;
    }
    .iconshoucangfuben {
      color: #ff3a3a;
    }
  }
  .like_container:hover {
    color: #ff3a3a;
  }
}

.popover {
  .iconfont {
    font-size: 26px;
    color: rgb(165, 161, 161);
  }
  .iconfont:hover {
    color: crimson;
  }
}
.content {
  z-index: 9;
  height: 520px;
  overflow-y: scroll;
  scrollbar-width: none;
}
.content::-webkit-scrollbar {
  display: none;
}
.music_name_wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  // color: rgb(209, 192, 62);
}
.music_name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.el-icon-video-camera {
  font-size: 17px;
  margin-left: 5px;
  color: rgb(25, 189, 189);
  font-weight: 600;
}
.el-icon-video-camera:hover {
  color: red;
}
.active_position {
  color: crimson;
}

.detail_content {
  background-color: #3a424b;
  height: 100%;
  padding: 0;
  z-index: 5;
  display: flex;
  justify-content: space-around;
  // background-color: #dddeec;
  // height: 79vh;
  .cover {
    width: 28%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    img {
      border-radius: 20px;
      width: 100%;
      box-shadow: 10px 10px 12px 15px rgba(0, 0, 0, 0.1);
    }
    .music_info {
      width: 100%;
      margin-top: 50px;
      font-weight: 600;
      color: #fff;
      font-size: 18px;
      div {
        width: 100%;
        margin-bottom: 10px;
      }
      .cover_name {
      }
      .creator_name {
      }
      .album_name {
      }
      .color_change {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .color_item {
          width: 50px;
          height: 50px;
          border-radius: 13px;
        }
      }
    }
  }
  .lyric {
    position: relative;
    width: 33%;
    height: 95%;
    overflow-y: scroll;
    padding: 0 30px;
    scrollbar-width: none;
  }
  .lyric::-webkit-scrollbar {
    display: none;
  }

  .comment {
    width: 30%;
    overflow-y: scroll;
    scrollbar-width: none;
  }
  .comment::-webkit-scrollbar {
    background-color: #ddd;
    display: none;
  }
  .comment::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 10px;
  }
}
.detail_content::-webkit-scrollbar {
  display: none;
}
/deep/.el-dialog {
  overflow-y: hidden;
  scrollbar-width: none;
}
.el-dialog::-webkit-scrollbar {
  display: none;
}
.el-dialog__wrapper {
  height: calc(100vh - 75px);
  // height: 100vh-90px;
  overflow-y: scroll;
  scrollbar-width: none;
  /deep/.el-dialog__header {
    background-color: #3a424b;
    height: 0;
    padding: 0;
  }
  /deep/.el-dialog__body {
    height: 100%;
    background-color: #3a424b;
    padding: 0;
  }
}
.el-dialog__wrapper::-webkit-scrollbar {
  display: none;
}

.comment-wrap {
  color: rgb(158, 149, 207);
  padding: 20px;
  font-size: 25px;
  font-weight: 600;
  p{
    margin: 20px 0;
  }
}

.comment-wrap ul li {
  display: flex;
  // border-bottom: 1px solid #eee;
  padding: 10px 0 5px 0;
  color: rgb(231, 224, 224);
}
.comment-wrap .comment_cover {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  .el-image {
    border-radius: 6px;
    box-shadow: 10px 9px 12px 10px rgba(0, 0, 0, 0.1);
  }
}

.comment-wrap .comment_content {
  width: 100%;
  margin-left: 10px;
}
.comment-wrap .comment_content .comment_user_name {
  color: #c7b4ce;
  font-size: 13px;
  margin-top: -3px;
  margin-bottom: 7px;
}
.comment-wrap .comment_content .comment_info {
  color: rgb(219, 217, 217);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5em;
text-align: justify;}
.comment-wrap .comment_content .comment_time {
  color: rgb(136, 129, 129);
  font-size: 11px;
}
.comment_footer {
  margin-top: 15px;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .button {
    .el-button {
      transform: scale(0.9);
      font-size: 10px;
      border: none;
      padding: 0;
      margin-right: 8px;
    }
    .active {
      color: rgb(41, 7, 7);
    }
  }
}
</style>